<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const enterNPC = () => {
  userStore.setIdentity('npc')
  router.push('/npc')
}

const enterSystem = () => {
  userStore.setIdentity('system')
  router.push('/system')
}
</script>

<template>
  <div class="min-h-screen bg-gradient-to-b from-blue-900 to-purple-900">
    <div class="container mx-auto px-4 py-16">
      <div class="text-center mb-12">
        <h1 class="text-5xl font-bold text-white mb-4">原神：重生提瓦特之我是系统</h1>
        <p class="text-xl text-gray-300">选择你的身份，开始提瓦特大陆的冒险</p>
      </div>

      <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        <div 
          @click="enterNPC"
          class="bg-white/10 backdrop-blur-md rounded-xl p-8 cursor-pointer transition-all hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30"
        >
          <div class="text-center">
            <div class="text-4xl mb-4">👤</div>
            <h2 class="text-2xl font-bold text-white mb-2">扮演NPC</h2>
            <p class="text-gray-300">创建并扮演原神世界中的角色，撰写日常生活文本</p>
          </div>
        </div>

        <div 
          @click="enterSystem"
          class="bg-white/10 backdrop-blur-md rounded-xl p-8 cursor-pointer transition-all hover:scale-105 hover:shadow-lg hover:shadow-purple-500/30"
        >
          <div class="text-center">
            <div class="text-4xl mb-4">⚙️</div>
            <h2 class="text-2xl font-bold text-white mb-2">系统管理</h2>
            <p class="text-gray-300">作为游戏管理者，发布任务并设定奖励机制</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>